<div class="product-display-section container-fluid" id="accessories">
  <h2 class="sec-custome-h2 {{ section.settings.custom_h2_class }}">
      <img src="{{ 'product-sec-h2-bg.png' | asset_url }}" class="sec-custome-h2-img" />
      <span>{{ section.settings.activity_title }}</span>
      <img src="{{ 'product-sec-h2-bg.png' | asset_url }}" class="sec-custome-h2-img" />
  </h2>
  {% if section.settings.show_img_accessories %}
  <div id="landing-page-banner-third" class="header-banner">
    <a href="{{ section.settings.accessories_img_href }}" style="margin:0 auto;">

      <img class="banner-mobile-image" src="{% if section.settings.accessories_img_mobile %}{{ section.settings.accessories_img_mobile | img_url: 'master' }}
      {% else %}{{ 'Black_Friday_mob.jpg' | asset_url }}{% endif %}"  
      style="margin:0 auto;" />

      <img class="banner-desktop-image" src="{% if section.settings.accessories_img_pc %}{{ section.settings.accessories_img_pc | img_url: 'master' }}
      {% else %}{{ 'Black_Friday_pc_banner.jpg' | asset_url }}{% endif %}"  
      style="margin:0 auto;" />

    </a>
  </div>
  {% endif %}
  <div class="product-section">
      <div class="products">
        {% assign product_51 = section.settings.selected_product_51 %}
        {% if product_51 %}
            {% assign valid_variant_found_51 = false %}
            {% assign no_variant_51 = false %}
            {% for variant in product_51.variants %}
              {% if variant.available and variant.inventory_quantity > 0 %}
                {% assign valid_variant_found_51 = true %}
                {% if variant.title == 'Default Title' %}
                {% assign no_variant_51 = true %}
                {% endif %}
                {% break %}
              {% endif %}
            {% endfor %}
            {% if valid_variant_found_51 %}
            <div class="product-card">
                {% assign variant_first_51 = product_51.variants.first %}
                {% if variant_first_51.compare_at_price and variant_first_51.compare_at_price > variant_first_51.price %}
                  {% assign variant_first_diff_51 = variant_first_51.compare_at_price | minus: variant_first_51.price %}
                  {% assign discount_diff_51_percentage = variant_first_diff_51 | times: 100 | divided_by: variant_first_51.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_51_percentage | round }}%</div>
                  <img src="{% if variant_first_51.title == 'Default Title' %} {{ product_51.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_first_51.featured_image.src | img_url: 'medium' }} {% endif %}" alt="{{ product_51.title }}" />
                {% else %}
                  {% assign discount_diff_51 = product_51.compare_at_price | minus: product_51.price %}
                  {% assign discount_diff_51_percentage = discount_diff_51 | times: 100 | divided_by: product_51.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_51_percentage | round }}%</div>
                  <img src="{{ product_51.featured_image | img_url: 'medium' }}" alt="{{ product_51.title }}" />
                {% endif %}
                
                <div class="product-info">
                    {% if product_51.compare_at_price and product_51.compare_at_price > product_51.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_5 }}</p>
                    {% endif %}
                    <h3>{{ product_51.title }}</h3>
                    {% if no_variant_51 %} <div class="product-blank-area"><p></p></div> {% endif %}
                    <select class="prodduct-selects{% if no_variant_51 %} hidden {% endif %}" id="prodduct-select-{{ product_51.id }}" onchange="return productSelectChangeAcc(this);">
                        {% for variant in product_51.variants %}
                        <option class="prodduct-selects-option" 
                          data-id="{{ variant.id }}" 
                          data-price="{{ variant.price | money }}" 
                          data-old-price="{{ variant.compare_at_price | money }}"
                          data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                        >
                          {{ variant.title }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="price">{{ product_51.price | money }}
                    {% if product_51.compare_at_price and product_51.compare_at_price > product_51.price %}
                    <span class="old-price">{{ product_51.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="return buyNowProductItem(this);">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_51.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

        {% assign product_52 = section.settings.selected_product_52 %}
        {% if product_52 %}
            {% assign valid_variant_found_52 = false %}
            {% assign no_variant_52 = false %}
            {% for variant in product_52.variants %}
              {% if variant.available and variant.inventory_quantity > 0 %}
                {% assign valid_variant_found_52 = true %}
                {% if variant.title == 'Default Title' %}
                {% assign no_variant_52 = true %}
                {% endif %}
                {% break %}
              {% endif %}
            {% endfor %}
            {% if valid_variant_found_52 %}
            <div class="product-card">
                {% assign variant_first_52 = product_52.variants.first %}
                {% if variant_first_52.compare_at_price and variant_first_52.compare_at_price > variant_first_52.price %}
                  {% assign discount_diff_52 = variant_first_52.compare_at_price | minus: variant_first_52.price %}
                  {% assign discount_diff_52_percentage = discount_diff_52 | times: 100 | divided_by: variant_first_52.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_52_percentage | round }}%</div>
                  <img src="{% if variant_first_52.title == 'Default Title' %} {{ product_52.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_first_52.featured_image.src | img_url: 'medium' }} {% endif %}" alt="{{ product_52.title }}" />
                {% else %}
                  {% assign discount_diff_52 = product_52.compare_at_price | minus: product_52.price %}
                  {% assign discount_diff_52_percentage = discount_diff_52 | times: 100 | divided_by: product_52.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_52_percentage | round }}%</div>
                  <img src="{{ product_52.featured_image | img_url: 'medium' }}" alt="{{ product_52.title }}" />
                {% endif %}
                <div class="product-info">
                    {% if product_52.compare_at_price and product_52.compare_at_price > product_52.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_5 }}</p>
                    {% endif %}
                    <h3>{{ product_52.title }}</h3>
                    {% if no_variant_52 %} <div class="product-blank-area"><p></p></div> {% endif %}
                    <select class="prodduct-selects{% if no_variant_52 %} hidden {% endif %}" id="prodduct-select-{{ product_52.id }}" onchange="return productSelectChange(this);">
                        {% for variant in product_52.variants %}
                        <option class="prodduct-selects-option" 
                          data-id="{{ variant.id }}" 
                          data-price="{{ variant.price | money }}" 
                          data-old-price="{{ variant.compare_at_price | money }}"
                          data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                        >
                          {{ variant.title }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="price">{{ product_52.price | money }}
                    {% if product_52.compare_at_price and product_52.compare_at_price > product_52.price %}
                    <span class="old-price">{{ product_52.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="return buyNowProductItem(this);">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_52.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}
        
        {% assign product_53 = section.settings.selected_product_53 %}
        {% if product_53 %}
            {% assign valid_variant_found_53 = false %}
            {% assign no_variant_53 = false %}
            {% for variant in product_53.variants %}
              {% if variant.available and variant.inventory_quantity > 0 %}
                {% assign valid_variant_found_53 = true %}
                {% if variant.title == 'Default Title' %}
                {% assign no_variant_53 = true %}
                {% endif %}
                {% break %}
              {% endif %}
            {% endfor %}
            {% if valid_variant_found_53 %}
            <div class="product-card">
                {% assign variant_first_53 = product_53.variants.first %}
                {% if variant_first_53.compare_at_price and variant_first_53.compare_at_price > variant_first_53.price %}
                  {% assign discount_diff_53 = variant_first_53.compare_at_price | minus: variant_first_53.price %}
                  {% assign discount_diff_53_percentage = discount_diff_53 | times: 100 | divided_by: variant_first_53.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_53_percentage | round }}%</div>
                  <img src="{% if variant_first_53.title == 'Default Title' %} {{ product_53.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_first_53.featured_image.src | img_url: 'medium' }} {% endif %}" alt="{{ product_53.title }}" />
                {% else %}
                  {% assign discount_diff_53 = product_53.compare_at_price | minus: product_53.price %}
                  {% assign discount_diff_53_percentage = discount_diff_53 | times: 100 | divided_by: product_53.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_53_percentage | round }}%</div>
                  <img src="{{ product_53.featured_image | img_url: 'medium' }}" alt="{{ product_53.title }}" />
                {% endif %}
                <div class="product-info">
                    {% if product_53.compare_at_price and product_53.compare_at_price > product_53.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_5 }}</p>
                    {% endif %}
                    <h3>{{ product_53.title }}</h3>
                    {% if no_variant_53 %} <div class="product-blank-area"><p></p></div> {% endif %}
                    <select class="prodduct-selects{% if no_variant_53 %} hidden {% endif %}" id="prodduct-select-{{ product_53.id }}" onchange="return productSelectChange(this);">
                        {% for variant in product_53.variants %}
                        <option class="prodduct-selects-option" 
                          data-id="{{ variant.id }}" 
                          data-price="{{ variant.price | money }}" 
                          data-old-price="{{ variant.compare_at_price | money }}"
                          data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                        >
                          {{ variant.title }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="price">{{ product_53.price | money }}
                    {% if product_53.compare_at_price and product_53.compare_at_price > product_53.price %}
                    <span class="old-price">{{ product_53.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="return buyNowProductItem(this);">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_53.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

        {% assign product_54 = section.settings.selected_product_54 %}
        {% if product_54 %}
            {% assign valid_variant_found_54 = false %}
            {% assign no_variant_54 = false %}
            {% for variant in product_54.variants %}
              {% if variant.available and variant.inventory_quantity > 0 %}
                {% assign valid_variant_found_54 = true %}
                {% if variant.title == 'Default Title' %}
                {% assign no_variant_54 = true %}
                {% endif %}
                {% break %}
              {% endif %}
            {% endfor %}
            {% if valid_variant_found_54 %}
            <div class="product-card">
                {% assign variant_first_54 = product_54.variants.first %}
                {% if variant_first_54.compare_at_price and variant_first_54.compare_at_price > variant_first_54.price %}
                  {% assign discount_diff_54 = variant_first_54.compare_at_price | minus: variant_first_54.price %}
                  {% assign discount_diff_54_percentage = discount_diff_54 | times: 100 | divided_by: variant_first_54.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_54_percentage | round }}%</div>
                  <img src="{% if variant_first_54.title == 'Default Title' %} {{ product_54.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_first_54.featured_image.src | img_url: 'medium' }} {% endif %}" alt="{{ product_54.title }}" />
                {% else %}
                  {% assign discount_diff_54 = product_54.compare_at_price | minus: product_54.price %}
                  {% assign discount_diff_54_percentage = discount_diff_54 | times: 100 | divided_by: product_54.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_54_percentage | round }}%</div>
                  <img src="{{ product_54.featured_image | img_url: 'medium' }}" alt="{{ product_54.title }}" />
                {% endif %}
                <div class="product-info">
                    {% if product_54.compare_at_price and product_54.compare_at_price > product_54.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_5 }}</p>
                    {% endif %}
                    <h3>{{ product_54.title }}</h3>
                    {% if no_variant_54 %} <div class="product-blank-area"><p></p></div> {% endif %}
                    <select class="prodduct-selects{% if no_variant_54 %} hidden {% endif %}" id="prodduct-select-{{ product_54.id }}" onchange="return productSelectChange(this);">
                        {% for variant in product_54.variants %}
                        <option class="prodduct-selects-option" 
                          data-id="{{ variant.id }}" 
                          data-price="{{ variant.price | money }}" 
                          data-old-price="{{ variant.compare_at_price | money }}"
                          data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                        >
                          {{ variant.title }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="price">{{ product_54.price | money }}
                    {% if product_54.compare_at_price and product_54.compare_at_price > product_54.price %}
                    <span class="old-price">{{ product_54.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="return buyNowProductItem(this);">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_54.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

        {% assign product_55 = section.settings.selected_product_55 %}
        {% if product_55 %}
            {% assign valid_variant_found_55 = false %}
            {% assign no_variant_55 = false %}
            {% for variant in product_55.variants %}
              {% if variant.available and variant.inventory_quantity > 0 %}
                {% assign valid_variant_found_55 = true %}
                {% if variant.title == 'Default Title' %}
                {% assign no_variant_55 = true %}
                {% endif %}
                {% break %}
              {% endif %}
            {% endfor %}
            {% if valid_variant_found_55 %}
            <div class="product-card">
                {% assign variant_first_55 = product_55.variants.first %}
                {% if variant_first_55.compare_at_price and variant_first_55.compare_at_price > variant_first_55.price %}
                  {% assign discount_diff_55 = variant_first_55.compare_at_price | minus: variant_first_55.price %}
                  {% assign discount_diff_55_percentage = discount_diff_55 | times: 100 | divided_by: variant_first_55.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_55_percentage | round }}%</div>
                  <img src="{% if variant_first_55.title == 'Default Title' %} {{ product_55.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_first_55.featured_image.src | img_url: 'medium' }} {% endif %}" alt="{{ product_55.title }}" />
                {% else %}
                  {% assign discount_diff_55 = product_55.compare_at_price | minus: product_55.price %}
                  {% assign discount_diff_55_percentage = discount_diff_55 | times: 100 | divided_by: product_55.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_55_percentage | round }}%</div>
                  <img src="{{ product_55.featured_image | img_url: 'medium' }}" alt="{{ product_55.title }}" />
                {% endif %}
                <div class="product-info">
                    {% if product_55.compare_at_price and product_55.compare_at_price > product_55.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_5 }}</p>
                    {% endif %}
                    <h3>{{ product_55.title }}</h3>
                    {% if no_variant_55 %} <div class="product-blank-area"><p></p></div> {% endif %}
                    <select class="prodduct-selects{% if no_variant_55 %} hidden {% endif %}" id="prodduct-select-{{ product_55.id }}" onchange="return productSelectChange(this);">
                        {% for variant in product_55.variants %}
                        <option class="prodduct-selects-option" 
                          data-id="{{ variant.id }}" 
                          data-price="{{ variant.price | money }}" 
                          data-old-price="{{ variant.compare_at_price | money }}"
                          data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                        >
                          {{ variant.title }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="price">{{ product_55.price | money }}
                    {% if product_55.compare_at_price and product_55.compare_at_price > product_55.price %}
                    <span class="old-price">{{ product_55.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="return buyNowProductItem(this);">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_55.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

        {% assign product_56 = section.settings.selected_product_56 %}
        {% if product_56 %}
            {% assign valid_variant_found_56 = false %}
            {% assign no_variant_56 = false %}
            {% for variant in product_56.variants %}
              {% if variant.available and variant.inventory_quantity > 0 %}
                {% assign valid_variant_found_56 = true %}
                {% if variant.title == 'Default Title' %}
                {% assign no_variant_56 = true %}
                {% endif %}
                {% break %}
              {% endif %}
            {% endfor %}
            {% if valid_variant_found_56 %}
            <div class="product-card">
                {% assign variant_first_56 = product_56.variants.first %}
                {% if variant_first_56.compare_at_price and variant_first_56.compare_at_price > variant_first_56.price %}
                  {% assign discount_diff_56 = variant_first_56.compare_at_price | minus: variant_first_56.price %}
                  {% assign discount_diff_56_percentage = discount_diff_56 | times: 100 | divided_by: variant_first_56.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_56_percentage | round }}%</div>
                  <img src="{% if variant_first_56.title == 'Default Title' %} {{ product_56.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_first_56.featured_image.src | img_url: 'medium' }} {% endif %}" alt="{{ product_56.title }}" />
                {% else %}
                  {% assign discount_diff_56 = product_56.compare_at_price | minus: product_56.price %}
                  {% assign discount_diff_56_percentage = discount_diff_56 | times: 100 | divided_by: product_56.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_56_percentage | round }}%</div>
                  <img src="{{ product_56.featured_image | img_url: 'medium' }}" alt="{{ product_56.title }}" />
                {% endif %}
                <div class="product-info">
                    {% if product_56.compare_at_price and product_56.compare_at_price > product_56.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_5 }}</p>
                    {% endif %}
                    <h3>{{ product_56.title }}</h3>
                    {% if no_variant_56 %} <div class="product-blank-area"><p></p></div> {% endif %}
                    <select class="prodduct-selects{% if no_variant_56 %} hidden {% endif %}" id="prodduct-select-{{ product_56.id }}" onchange="return productSelectChange(this);">
                        {% for variant in product_56.variants %}
                        <option class="prodduct-selects-option" 
                          data-id="{{ variant.id }}" 
                          data-price="{{ variant.price | money }}" 
                          data-old-price="{{ variant.compare_at_price | money }}"
                          data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                        >
                          {{ variant.title }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="price">{{ product_56.price | money }}
                    {% if product_56.compare_at_price and product_56.compare_at_price > product_56.price %}
                    <span class="old-price">{{ product_56.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="return buyNowProductItem(this);">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_56.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

        {% assign product_57 = section.settings.selected_product_57 %}
        {% if product_57 %}
            {% assign valid_variant_found_57 = false %}
            {% assign no_variant_57 = false %}
            {% for variant in product_57.variants %}
              {% if variant.available and variant.inventory_quantity > 0 %}
                {% assign valid_variant_found_57 = true %}
                {% if variant.title == 'Default Title' %}
                {% assign no_variant_57 = true %}
                {% endif %}
                {% break %}
              {% endif %}
            {% endfor %}
            {% if valid_variant_found_57 %}
            <div class="product-card">
                {% assign variant_first_57 = product_57.variants.first %}
                {% if variant_first_57.compare_at_price and variant_first_57.compare_at_price > variant_first_57.price %}
                  {% assign discount_diff_57 = variant_first_57.compare_at_price | minus: variant_first_57.price %}
                  {% assign discount_diff_57_percentage = discount_diff_57 | times: 100 | divided_by: variant_first_57.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_57_percentage | round }}%</div>
                  <img src="{% if variant_first_57.title == 'Default Title' %} {{ product_57.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_first_57.featured_image.src | img_url: 'medium' }} {% endif %}" alt="{{ product_57.title }}" />
                {% else %}
                  {% assign discount_diff_57 = product_57.compare_at_price | minus: product_57.price %}
                  {% assign discount_diff_57_percentage = discount_diff_57 | times: 100 | divided_by: product_57.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_57_percentage | round }}%</div>
                  <img src="{{ product_57.featured_image | img_url: 'medium' }}" alt="{{ product_57.title }}" />
                {% endif %}
                <div class="product-info">
                    {% if product_57.compare_at_price and product_57.compare_at_price > product_57.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_5 }}</p>
                    {% endif %}
                    <h3>{{ product_57.title }}</h3>
                    {% if no_variant_57 %} <div class="product-blank-area"><p></p></div> {% endif %}
                    <select class="prodduct-selects{% if no_variant_57 %} hidden {% endif %}" id="prodduct-select-{{ product_57.id }}" onchange="return productSelectChange(this);">
                        {% for variant in product_57.variants %}
                        <option class="prodduct-selects-option" 
                          data-id="{{ variant.id }}" 
                          data-price="{{ variant.price | money }}" 
                          data-old-price="{{ variant.compare_at_price | money }}"
                          data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                        >
                          {{ variant.title }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="price">{{ product_57.price | money }}
                    {% if product_57.compare_at_price and product_57.compare_at_price > product_57.price %}
                    <span class="old-price">{{ product_57.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="return buyNowProductItem(this);">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_57.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

        {% assign product_58 = section.settings.selected_product_58 %}
        {% if product_58 %}
            {% assign valid_variant_found_58 = false %}
            {% assign no_variant_58 = false %}
            {% for variant in product_58.variants %}
              {% if variant.available and variant.inventory_quantity > 0 %}
                {% assign valid_variant_found_58 = true %}
                {% if variant.title == 'Default Title' %}
                {% assign no_variant_58 = true %}
                {% endif %}
                {% break %}
              {% endif %}
            {% endfor %}
            {% if valid_variant_found_58 %}
            <div class="product-card">
                {% assign variant_first_58 = product_58.variants.first %}
                {% if variant_first_58.compare_at_price and variant_first_58.compare_at_price > variant_first_58.price %}
                  {% assign discount_diff_58 = variant_first_58.compare_at_price | minus: variant_first_58.price %}
                  {% assign discount_diff_58_percentage = discount_diff_58 | times: 100 | divided_by: variant_first_58.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_58_percentage | round }}%</div>
                  <img src="{% if variant_first_58.title == 'Default Title' %} {{ product_58.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_first_58.featured_image.src | img_url: 'medium' }} {% endif %}" alt="{{ product_58.title }}" />
                {% else %}
                  {% assign discount_diff_58 = product_58.compare_at_price | minus: product_58.price %}
                  {% assign discount_diff_58_percentage = discount_diff_58 | times: 100 | divided_by: product_58.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_58_percentage | round }}%</div>
                  <img src="{{ product_58.featured_image | img_url: 'medium' }}" alt="{{ product_58.title }}" />
                {% endif %}
                <div class="product-info">
                    {% if product_58.compare_at_price and product_58.compare_at_price > product_58.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_5 }}</p>
                    {% endif %}
                    <h3>{{ product_58.title }}</h3>
                    {% if no_variant_58 %} <div class="product-blank-area"><p></p></div> {% endif %}
                    <select class="prodduct-selects{% if no_variant_58 %} hidden {% endif %}" id="prodduct-select-{{ product_58.id }}" onchange="return productSelectChange(this);">
                        {% for variant in product_58.variants %}
                        <option class="prodduct-selects-option" 
                          data-id="{{ variant.id }}" 
                          data-price="{{ variant.price | money }}" 
                          data-old-price="{{ variant.compare_at_price | money }}"
                          data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                        >
                          {{ variant.title }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="price">{{ product_58.price | money }}
                    {% if product_58.compare_at_price and product_58.compare_at_price > product_58.price %}
                    <span class="old-price">{{ product_58.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="return buyNowProductItem(this);">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_58.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

        {% assign product_59 = section.settings.selected_product_59 %}
        {% if product_59 %}
            {% assign valid_variant_found_59 = false %}
            {% assign no_variant_59 = false %}
            {% for variant in product_59.variants %}
              {% if variant.available and variant.inventory_quantity > 0 %}
                {% assign valid_variant_found_59 = true %}
                {% if variant.title == 'Default Title' %}
                {% assign no_variant_59 = true %}
                {% endif %}
                {% break %}
              {% endif %}
            {% endfor %}
            {% if valid_variant_found_59 %}
            <div class="product-card">
                {% assign variant_first_59 = product_59.variants.first %}
                {% if variant_first_59.compare_at_price and variant_first_59.compare_at_price > variant_first_59.price %}
                  {% assign discount_diff_59 = variant_first_59.compare_at_price | minus: variant_first_59.price %}
                  {% assign discount_diff_59_percentage = discount_diff_59 | times: 100 | divided_by: variant_first_59.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_59_percentage | round }}%</div>
                  <img src="{% if variant_first_59.title == 'Default Title' %} {{ product_59.featured_image.src | img_url: 'medium' }} {% else %} {{ variant_first_59.featured_image.src | img_url: 'medium' }} {% endif %}" alt="{{ product_59.title }}" />
                {% else %}
                  {% assign discount_diff_59 = product_59.compare_at_price | minus: product_59.price %}
                  {% assign discount_diff_59_percentage = discount_diff_59 | times: 100 | divided_by: product_59.compare_at_price %}
                  <div class="discount-badge">{{ discount_diff_59_percentage | round }}%</div>
                  <img src="{{ product_59.featured_image | img_url: 'medium' }}" alt="{{ product_59.title }}" />
                {% endif %}
                <div class="product-info">
                    {% if product_59.compare_at_price and product_59.compare_at_price > product_59.price %}
                    <p class="promo-info">{{ section.settings.promo_sale_tip_5 }}</p>
                    {% endif %}
                    <h3>{{ product_59.title }}</h3>
                    {% if no_variant_59 %} <div class="product-blank-area"><p></p></div> {% endif %}
                    <select class="prodduct-selects{% if no_variant_59 %} hidden {% endif %}" id="prodduct-select-{{ product_59.id }}" onchange="return productSelectChange(this);">
                        {% for variant in product_59.variants %}
                        <option class="prodduct-selects-option" 
                          data-id="{{ variant.id }}" 
                          data-price="{{ variant.price | money }}" 
                          data-old-price="{{ variant.compare_at_price | money }}"
                          data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                        >
                          {{ variant.title }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="price">{{ product_59.price | money }}
                    {% if product_59.compare_at_price and product_59.compare_at_price > product_59.price %}
                    <span class="old-price">{{ product_59.compare_at_price | money }}</span>
                    {% endif %}
                    </p>
                </div>
                <div class="buttons">
                    <button class="buy-now" onclick="return buyNowProductItem(this);">BUY NOW</button>
                    <button onclick="javascript:window.location.href='{{ product_59.url }}'">LEARN MORE</button>
                </div>
            </div>
            {% endif %}
        {% endif %}

      </div>
  </div>
</div>
{% schema %}
{
  "name": "Accessories Products",
  "settings": [
    {
      "type": "header",
      "content": "Accessories Image Setting"
    },
    {
      "type": "checkbox",
      "id": "show_img_accessories",
      "label": "Enable Image",
      "default": true
    },{
      "type": "text",
      "id": "accessories_img_href",
      "label": "Image Link",
      "info": "Put href link here",
      "default":"#"
    },{
      "type": "image_picker",
      "id": "accessories_img_pc",
      "label": "Image On PC Client",
      "info": "Upload a image(PC)"
    },{
      "type": "image_picker",
      "id": "accessories_img_mobile",
      "label": "Image On Mobile Client",
      "info": "Upload a image(Mobile)"
    },
    {
      "type": "header",
      "content": "Basic Setting"
    },
    {
      "type": "text",
      "label": "Active Title",
      "id": "activity_title",
      "default": "Accessories"
    },
    {
      "type": "text",
      "id": "custom_h2_class",
      "label": "Custom Title classes"
    },
    {
      "type": "text",
      "id": "promo_sale_tip_5",
      "label": "Promotion Product Tips",
      "default": "Special Sale"
    },
    {
      "type": "header",
      "content": "Product[1] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_51",
      "label": "Select Product [1]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "header",
      "content": "Product[2] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_52",
      "label": "Select Product [2]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "header",
      "content": "Product[3] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_53",
      "label": "Select Product [3]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "header",
      "content": "Product[4] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_54",
      "label": "Select Product [4]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "header",
      "content": "Product[5] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_55",
      "label": "Select Product [5]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "header",
      "content": "Product[6] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_56",
      "label": "Select Product [6]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "header",
      "content": "Product[7] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_57",
      "label": "Select Product [7]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "header",
      "content": "Product[8] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_58",
      "label": "Select Product [8]",
      "info": "Choose the product that contains the variant you want to display."
    },
    {
      "type": "header",
      "content": "Product[9] Setting"
    },
    {
      "type": "product",
      "id": "selected_product_59",
      "label": "Select Product [9]",
      "info": "Choose the product that contains the variant you want to display."
    }
  ],
  "presets": [
    {
      "name": "Default"
    }
  ]
}
{% endschema %}